<%--这个是供号商,查看支付流水的jsp,引入到,spuser-splist里面作为弹窗出现--%>
<!-- Modal 查看账号流水-->
<%@ page language="java" contentType="text/html;charset=utf-8" %>

<div class="modal fade full-width-chart" id="spuser_orderlist" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title control-label" id="newWhiteIpsModallabel">查看流水</h4>
            </div>
            <div class="modal-body">
                <form class="" role="form">
                    <div class="container">
                        <div class="row">
                            <!--前缀-->
                            <div class="form-group col-lg-4">
                                <div class="input-group">
                                    <span class="input-group-addon">开始日期:</span>
                                    <input class="form-control" id="startTime" type="datetime-local">
                                </div>
                            </div>
                            <div class="form-group col-lg-4">
                                <div class="input-group">
                                    <span class="input-group-addon">结束日期:</span>
                                    <input class="form-control" id="endTime" type="datetime-local">
                                </div>
                            </div>
                            <div class="form-group col-lg-2">
                                <button type="button" class="btn btn-primary" id="queryOrderList">查询</button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- /.box-header -->
                <div class="tableContent">
                    <%--class="table table-bordered table-hover"--%>
                    <table id="orderLst" width="100%" border="1" cellpadding="0" cellspacing="0">
                        <thead>
                        <tr>
                            <th width="5%">ID</th>
                            <th width="10%">商户名称</th>
                            <th width="5%">商户 ID</th>
                            <th width="5%">商品描述</th>
                            <th width="14%">订单</th>
                            <th width="5%">金额</th>
                            <th width="5%">支付方式</th>
                            <th width="5%">状态</th>
                        </tr>
                        </thead>
                        <tbody id="spuser_orderListbody">
                        <tr>
                            <td colspan="9">未找到数据</td>
                        </tr>
                        </tbody>
                    </table>
                    <tr>
                        <td colspan="18">总金额 :<span id="moneytotal">0</span> &nbsp&nbsp</td>
                        <td colspan="18">总笔数 :<span id="count">0</span> &nbsp&nbsp</td>
                    </tr>
                    <div class="col-sm-10">
                        <nav id="spUserListPage">
                        </nav>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            </div>
        </div>
    </div>
</div>

<script>
    selectToday();
    var _spuserOL = null;

    /**
     * 供号商查看某个账口下的流水
     * 点击后调前,弹窗会自动打开,这里作好传值和初始化工作
     * @param spuserId 值号商ID
     */
    function lookSpuserOrderList(spId, isFirst) {
        if (!!isFirst) {
            selectToday();
            setTimeout(function () {
                lookSpuserOrderList(spId);
            }, 0);
            return false;
        }
        _spuserOL = SpuserOrderList(spId);
        _spuserOL.queryOrderList();
        $('#spuser_orderListbody').children().remove();

        //总价
        $('#moneytotal').html(0);
        //总费用
        $('#feetotal').html(0);
        //总条数
        $('#count').html(0);

        $('#spuser_orderListbody').children().remove();
        $('#queryOrderList').unbind('click');
        $('#queryOrderList').click(function () {
            _spuserOL.queryOrderList();
        });
    }

    function selectToday() {
        var now = new Date();
        //格式化日，如果小于9，前面补0
        var day = ("0" + now.getDate()).slice(-2);
        //格式化月，如果小于9，前面补0
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        //拼装完整日期格式
        var today = now.getFullYear() + "-" + (month) + "-" + (day);
        //完成赋值
        $('#startTime').val(today + "T00:00");
        $('#endTime').val(today + "T23:59");
    }

    /**
     * jQuery分页插件
     * @param pagination{page: 0, pageSize: 10, total: 17, pages: 2}
     */
    function spuserOrderListPagination(pagination) {
        $("#spUserListPage").cxPagination({
            totalCount: pagination.total,
            currentNumber: pagination.page,
            pageSize: pagination.pageSize,
            pageSizeArr: [10, 15, 20, 50, 70, 100, 200, 500, 1000],
            onSelectPage: function (a, b) {
                _spuserOL.queryOrderList(a, b);
            },
            onChangePageSize: function (a, b) {
                _spuserOL.queryOrderList(a, b);
            },
        });
    }

    /**
     * 管理这个弹窗的类,
     * @param spId
     * @constructor
     */
    var SpuserOrderList = function (spId) {
        var $tBody = $('#spuser_orderListbody');
        //查询方法isPage,是否是分页器点击,分页器点击,不刷新分页器
        var queryOrderList = function (p, pz) {
            $('#loading').show();
            if (!p) p = 1;
            if (!pz) pz = 10;
            //取值
            var startTime = $('#startTime').val().toString();
            var endTime = $('#endTime').val().toString();
            console.log(this.spId, startTime, endTime);
            $.ajax({
                url: "${pageContext.request.contextPath}/spUser/orderListQuery",
                data: {
                    spId: this.spId, startTime: startTime, endTime: endTime, p: p, pz: pz
                },
                dataType: 'json',
                type: "POST",
                async: true,
                context: this,
                // timeout: 10000,
                success: function (data) {
                    console.log('后端返回了什么东西', data);
                    if (null != data && data.code == 200) {
                        var result = data.result;
                        var orders = result.orders;
                        $tBody.children().remove();

                        //刷新数据
                        if (orders.length === 0) {
                            $tBody.append('<tr><td colspan="9">未找到数据</td></tr>');
                        } else {
                            var moneytotal = result.totalAmount || 0;
                            var totalCount = result.totalCount || 0;
                            $.each(orders, function (i, n) {
                                if (!n.actualPayAmount) n.actualPayAmount = 0;
                                $tBody.append("<tr>" +
                                    "<td>" + n.id + "</td>" +
                                    "<td>" + n.cpName + "</td>" +
                                    "<td>" + n.cpId + "</td>" +
                                    "<td>" + n.body + "</td>" +
                                    "<td>" + n.tradeNo + "</td>" +
                                    "<td>" + n.actualPayAmount + "</td>" +
                                    "<td>" + n.channelName + "</td>" +
                                    "<td>" + n.stateName + "</td>" +
                                    "</tr>"
                                );
                            });
                            //总价
                            $('#moneytotal').html(moneytotal.toFixed(2));
                            //总条数
                            $('#count').html(totalCount);
                        }
                        $('#loading').hide();

                        //刷新分页器
                        spuserOrderListPagination(result.pagination);
                    } else {
                        alert("失败:" + data);
                    }
                },
                error: function (d, s, b) {
                    console.log(d, s, b);
                    alert("失败:" + b);
                }
            });
        }

        return {
            spId: spId,//通道Id
            queryOrderList: queryOrderList,//查询方法
        }
    }

    $(function () {
    });
</script>

